<template>
  <div>
    <!-- 头部组件 -->
    <Header />
    <!-- 搜索框组件 -->
    <van-search @focus="focus" v-model="value" shape="round" background="rgba(0,0,0,0)" placeholder="请输入搜索关键词" />
    <!-- title 今日推荐 -->
    <van-cell title="今日为您推荐" :border="false"  />
    <recommend />
    <!-- 最近喜欢歌单列表 -->
    <PlaylistTable :list="palyList" :cellName="PlaylistTableCellName" />
    <!-- 全民皆听 -->
    <SongItem
    :songList="songList"
    :cellName="SongItemCellName"
    ></SongItem>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import SongItem from '@/components/SongItem.vue'
import PlaylistTable from '@/components/PlaylistTable.vue'
import recommend from './compontents/recommend.vue'
import { newMusicAPI, recommendMusicAPI } from '@/api'
export default {
  name: 'homePage',
  components: {
    Header, PlaylistTable, SongItem, recommend
  },
  data () {
    return {
      value: '',
      songList: [], // 最新音乐数据
      palyList: [], // 推荐歌单数据
      PlaylistTableCellName: '猜你喜欢',
      SongItemCellName: '全名皆听'
    }
  },
  async created () {
    const res = await recommendMusicAPI({
      limit: 9
    })
    this.palyList = res.data.result

    const res2 = await newMusicAPI({
    limit: 20
    })
    this.songList = res2.data.result
  },
  methods: {
    focus () {
      this.$router.push('/layout/search')
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell{
 background-color:rgba(0,0,0,0);
 font-weight: bold;
}

</style>